<template>
    <div class="ad-container">
        <div class="skip">
            <van-button @click="jump" size="mini">跳过{{ time }}s</van-button>
        </div>
    </div>
</template>

<script setup>

import { onMounted, ref, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router'

const router = useRouter()

const time = ref(3) // 3s
const timer = ref(null) // 3s


// 挂载生命周期
onMounted(() => {
    // 定时器
    timer.value = setInterval(() => {
        console.log('我还在run。。。。')
        time.value--
        if (time.value === 0) {
            // 防止返回前一页
            router.replace('/home')
        }
    }, 1000)
})

// 卸载（销毁）生命周期
onBeforeUnmount(() => {
    clearInterval(timer.value)
})

const jump = () => {
    router.replace('/home')
}

</script>

<style lang="scss" scoped>
.ad-container {
    height: 100vh;
    width: 100vw;
    background: url(../assets/images/ad.jpg) no-repeat;
    background-size: cover;

    .skip {
        padding: 4px;
        text-align: right;
    }
}
</style>